import React from 'react'
import ReactDOM from 'react-dom'
// cnpm i styled-components -S
import styled from 'styled-components'

const ModalDiv = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 999;
  `
/* Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法  */
/* 第一个参数child是可渲染的react子项，比如元素，字符串或者片段等。第二个参数container是一个DOM元素 */
/* 普通的组件，子组件的元素将挂载到父组件的DOM节点中。 */

/* 有时需要将元素渲染到DOM中的不同位置上去，这是就用到的portal的方法 */
// ReactDOM.createPortal(child,container);

class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      <ModalDiv>
        <button onClick = { () => {
          this.props.onClose()
        }}>关闭</button>
      </ModalDiv>,
      document.getElementsByTagName('body')[0]
    );
  }
}

export default class App extends React.Component {
  state = { show: false }

  handleClick() {
    // 当子元素里的按钮被点击时，
    // 这个将会被触发更新父元素的 state，
    // 即使这个按钮在 DOM 中不是直接关联的后代
    this.setState(state => ({
      show: true
    }));
  }
  closeHandler = () => {
    this.setState(state => ({
      show: false
    }));
  } 

  render() {
    return (
      <div >
        <button onClick={this.handleClick.bind(this)}>打开模态框</button>
        <div style={{ height: 3000}}>
          {/* ul>li*100{$$} */}
        </div>
        {
          this.state.show ? <Modal onClose = { this.closeHandler }></Modal> : null
        }
      </div>
    );
  }
}
